// -------------------------- 1. 实现基本的剪裁效果 -----------------------------------

// 1.1 获取裁剪区域的 DOM 元素
var $image = $('#image')

// 1.2 配置选项
const options = {
    // 纵横比
    aspectRatio: 1,
    // 指定预览区域
    preview: '.img-preview'
}

// 1.3 创建裁剪区域
$image.cropper(options);


// -------------------------- 2. 点击上传，能够选图片 ---------------------------------
$('button:contains("上传")').on('click', function () {
    // 触发文件域的单击事件
    $('#file').trigger('click');
})

// -------------------------- 3. 选择了图片，更换剪裁区的图片 ---------------------------
// 当文件域的内容改变的时候，更换剪裁区的图片
$('#file').on('change', function () {
    // 获取被选图片的url 1. 找到文件对象 ---> 2. 生成临时的url
    // console.dir(this);
    let fileObj = this.files[0];
    let url = URL.createObjectURL(fileObj);
    // console.log(url)
    // 更换剪裁区的图片(先销毁剪裁区 --> 更换图片 --> 重新创建剪裁区)
    $image.cropper('destroy').attr('src', url).cropper(options);
})


// -------------------------- 4. 点击确定按钮，剪裁并更换图片 ---------------------------
$('button:contains("确定")').on('click', function () {
    // 1. 先剪裁。得到canvas图片（canvas h5 中的画布）（canvas是html标签及一套绘图API）
    let canvas = $image.cropper('getCroppedCanvas', {
        width: 100,
        height: 100
    });
    // 2. 把剪裁后的图片，转成base64格式的字符串
    let base64 = canvas.toDataURL('image/png');

    // 3. Ajax提交base64格式的字符串，从而完成更换头像
    $.ajax({
        type: 'POST',
        url: '/my/update/avatar',
        data: {
            avatar: base64
        },
        success: function (res) {
            layer.msg(res.message);
            // 如果更换成功，更换父页面（index.html) 的头像
            window.parent.getUserInfo();
        }
    });
})
